<script lang="ts" setup>
import { computed, inject, onMounted, reactive, ref, watch, onUnmounted } from 'vue';
import { tabPaneProps } from './tab-pane';
import { tabsRootContextKey } from '../../../tokens/tabs';
import { getImage } from '@/utils';
defineOptions({ name: 'WindowsTabPane' });
const props = defineProps(tabPaneProps);
const tabsRoot = inject(tabsRootContextKey);
const active = computed(() => tabsRoot.currentName.value === props.name);
const paner = ref<HTMLElement | null>(null);
const header = ref<HTMLElement | null>(null);
const config = reactive({
  disX: 0,
  disY: 0,
  minLeft: 0,
  maxLeft: 0,
  minTop: 0,
  maxTop: 0,
  maximize: false, // 最大化
  minimize: false, // 最小化
  height: 0,
  left: 0,
  top: 0,
});
const pane = reactive({
  props,
  active,
  minimize: config.minimize,
});
watch(
  active,
  value => {
    if (value) {
      config.minimize = false;
    }
  },
  { immediate: true }
);
const initDrag = () => {
  config.height = paner.value.offsetHeight;
  //paner.value.style.height = config.height + 'px';
  paner.value.style.width = props.width + 'px';
  paner.value.style.height = props.height + 'px';
  header.value.addEventListener('mousedown', onMousedown, false); //点击头部区域拖拽
  window.onresize = () =>
    (() => {
      //onresize();
    })();
  onresize();
};

const onresize = () => {
  config.left = (props.target.offsetWidth - paner.value.clientWidth) / 2;
  config.top = (props.target.offsetHeight - paner.value.clientHeight) / 2;
  paner.value.style.left = config.left + 'px';
  paner.value.style.top = config.top + 'px';
};

const onMousedown = (e: MouseEvent) => {
  //tabsRoot!.currentName.value = paneName.value;
  if (config.maximize) return;
  config.disX = e.clientX - paner.value.offsetLeft;
  config.disY = e.clientY - paner.value.offsetTop;
  config.maxLeft = props.target.offsetWidth - paner.value.offsetWidth;
  config.maxTop = props.target.offsetHeight - paner.value.offsetHeight;

  document.addEventListener('mousemove', onMousemove, false);
  document.addEventListener('mouseup', onMouseup, false);
  //document.body.style.userSelect = 'none'; //消除拖拽中选中文本干扰
};
const onMousemove = (e: MouseEvent) => {
  e.stopPropagation();
  e.preventDefault();
  config.left = e.clientX - config.disX;
  config.top = e.clientY - config.disY;
  if (-config.left >= config.minLeft) {
    config.left = config.minLeft;
  } else if (config.left > config.maxLeft) {
    config.left = config.maxLeft;
  }

  if (-config.top > config.minTop) {
    config.top = -config.minTop;
  } else if (config.top > config.maxTop) {
    config.top = config.maxTop;
  }
  paner.value.style.left = config.left + 'px';
  paner.value.style.top = config.top + 'px';
};
const onMouseup = () => {
  document.removeEventListener('mousemove', onMousemove, false);
  document.removeEventListener('mouseup', onMouseup, false);
  //document.body.style.userSelect = 'auto'; //恢复文本可选中
};
// 最大化
const handleMaximize = (e: MouseEvent) => {
  //最大化动画
  paner.value.style.transition = 'all 0.14s linear';
  if (config.maximize === false) {
    const bottomHeight = window.document.body.clientHeight - props.target.clientHeight;
    paner.value.style.width = props.target.clientWidth + 'px';
    paner.value.style.height = props.target.clientHeight - bottomHeight + 'px';
    paner.value.style.left = '0';
    paner.value.style.top = '0';
    config.maximize = true;
  } else {
    paner.value.style.height = props.height + 'px';
    paner.value.style.width = props.width + 'px';
    paner.value.style.left = config.left + 'px';
    paner.value.style.top = config.top + 'px';
    config.maximize = false;
  }
  setTimeout(() => {
    paner.value.style.transition = '';
  }, 140);
};
//最小化
const handleMinimize = () => {
  config.minimize = true;
  tabsRoot.minimizePane(props.name);
};
//移除tab
const handleTabRemove = (tabName: string | number) => {
  tabsRoot.removePane(tabName);
};
//选中tab
const handleTabActive = () => {
  tabsRoot.currentName.value = pane.props.name;
};
onMounted(() => {
  tabsRoot.registerPane(pane);
  initDrag();
});
onUnmounted(() => {
  tabsRoot.unregisterPane(pane.props.name);
});
</script>

<template>
  <div ref="paner" :class="['windows-tab-pane', config.maximize ? 'fullscreen' : '']" :style="{ 'z-index': active ? 10 : 'auto' }" @mousedown="handleTabActive" v-show="!config.minimize">
    <div class="windows-tab-pane__btnwrapper">
      <div class="windows-tab-pane__btn" @click="handleMinimize">
        <el-icon><i-fluent-subtract-48-regular /></el-icon>
      </div>
      <div class="windows-tab-pane__btn" @click="handleMaximize">
        <el-icon v-if="config.maximize"><i-fluent-square-multiple-48-regular /></el-icon>
        <el-icon v-else><i-fluent-square-48-regular /></el-icon>
      </div>
      <div class="windows-tab-pane__btn" @click="handleTabRemove(props.name)">
        <el-icon>
          <i-fluent-dismiss-48-regular />
        </el-icon>
      </div>
    </div>
    <div ref="header" class="windows-tab-pane__header">
      <div class="windows-tab-pane__title">
        <el-image style="width: 20px" :src="getImage(props.icon)" fit="contain" />
        <span>{{ label }}</span>
      </div>
    </div>
    <div class="windows-tab-pane__content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.windows-tab-pane {
  box-shadow: 0px 0px 2px 1px rgb(204 204 204 / 100%);
  position: fixed;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background: rgba(240, 243, 249, 1);
  overflow: hidden;
  //width: 800px;
  .windows-tab-pane__header {
    display: flex;
    justify-content: space-between;
    height: 30px;
    user-select: none;
    .windows-tab-pane__title {
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 5px;
      span {
        margin-left: 5px;
      }
    }
  }
  .windows-tab-pane__btnwrapper {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    height: 30px;
    .windows-tab-pane__btn {
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        background: #e9e9eb;
      }
      &:last-child {
        border-top-right-radius: 5px;
        &:hover {
          color: #fff;
          background: #c45656;
        }
      }
    }
  }
  .windows-tab-pane__content {
    background-color: #fff;
    flex: 1;
    overflow: hidden;
  }
}
</style>
